[Day 05] Sass - Variables - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 5

Modern Web

使用SASS(SCSS)建立自己的CSS Library系列第 5 篇

[Day 05] Sass - Variables

13th鐵人賽 sass css

zhix6842

2021-09-18 23:38:51

919 瀏覽

分享至

Variables

在Sass中，開發者可以使用變數，例如可以將常用的顏色、寬度設定成變數，這樣未來如果顏色或寬度要改變時，只需要改掉變數的值，而不用像一般CSS一樣需要到每個地方把顏色或寬度改成新的值~

舉例來說，在Sass裡可以這樣用:

// 宣告變數
$image-max-width: 50px;

// 使用變數
img {
    max-width: $image-max-width;
}

// 宣告變數
$primary: #0058E6;

// 使用變數
h1 {
    color: $primary;
}

直接寫比較有感覺，我們來寫一些常用的變數
打開我們在Day3建立的專案，在main.scss最上面加上:

// main.scss

// colors
$primary: #0058E6;
$secondary: #00F26D;
$warning: #F5BD2D;

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

h1 {
  color: $primary;
  margin: $base-margin;
}

a {
  color: $secondary;
}

button {
  color: white;
  background: $warning;
  padding: $base-padding;
  display: block;
}

接著修改index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>[Day05] ITHelp Sass</title>
</head>

<body>
  <h1>This is an h1</h1>
  <a>This is an anchor tag</a>
  <button>Warning</button>

</body>

</html>

接下來將專案跑起來(終端機輸入gulp編譯sass和用Live Server打開index.html，之後的文章不會再提醒~)
就會看到網頁顯示如下圖